import { Layout } from "@/components/layout/layout";
import { Visibility, VisibilityOff, EmailOutlined } from "@mui/icons-material";
import { Button, Checkbox, Input } from "@nextui-org/react";
import type { NextPage } from "next";
import Link from "next/link";
import { useState } from "react";

import { showToast } from "@/components/toast";
import { request } from "@/utils/request";
import { useHttp } from "@/hooks";
import { useRouter } from "next/router";
import { useActions } from "@/hooks/useActions";

const LoginPage: NextPage = () => {
  const [isVisible, setIsVisible] = useState(false);
  const { isLoading, http } = useHttp();
  const router = useRouter();
  const { setUserInfo } = useActions();

  const handleSubmit = async () => {
    if (!email) {
      showToast("Please enter your email");
      return;
    }
    const re = /@(\w+)(\.\w+)+$/;
    if (!re.test(email)) {
      showToast("Please enter a valid email");
      return;
    }
    if (!password) {
      showToast("Please enter your password");
      return;
    }
    const res = await http.post("/api/login", { email, password });
    // console.log("🚀 ~ handleSubmit ~ res:", res);
    if (res?.success) {
      setUserInfo(res.data);
      router.back();
    }
  };

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleKeyUp = (e: any) => {
    if (e.code === "Enter") {
      handleSubmit();
    }
  };

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div className="login-page pt-[150px]">
      <div className="login-form max-w-sm mx-auto">
        <Input
          fullWidth
          color="default"
          isClearable={false}
          variant="bordered"
          radius="lg"
          size="md"
          type="email"
          isRequired
          label="Email"
          className="mb-4"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          onKeyUp={handleKeyUp}
          // contentLeft={<Mail fill="currentColor" />}
        />
        <Input
          fullWidth
          color="default"
          variant="bordered"
          radius="lg"
          type={isVisible ? "text" : "password"}
          isRequired
          size="md"
          label="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          onKeyUp={handleKeyUp}
          endContent={
            <button
              className="focus:outline-none"
              type="button"
              onClick={toggleVisibility}
            >
              {isVisible ? (
                <VisibilityOff className="text-md text-default-400" />
              ) : (
                <Visibility className="text-md text-default-400" />
              )}
            </button>
          }
        />
        <div className="flex justify-between mt-4">
          <Checkbox>
            <span className="font-14">Remember me</span>
          </Checkbox>
          <Link
            href={"/user/password/forgot"}
            className="font-14 hover:text-primary"
          >
            Forgot password?
          </Link>
        </div>
        <div className="actions text-center mt-6">
          <Button
            color="primary"
            isLoading={isLoading}
            className="w-full"
            size="lg"
            onClick={handleSubmit}
          >
            Register or Login
          </Button>
        </div>
      </div>
    </div>
  );
};

export default LoginPage;
